<template>
  <view>
    <view class="top"></view>
    <view class="card">
      <image src="../../static/images/kefu.png" mode="widthFix" style="width: 210rpx;"></image>
      <view class="flex-col justify-around align-center">
        <view class="text-xl text-bold">在线客服</view>
        <view class="text-gray">有问题，找客服</view>
        <my-btn class="kefu-btn" width="300rpx" radius open-type="contact">立即咨询</my-btn>
      </view>
    </view>

    <view class="margin-top padding bg-white">
      <view class="margin-tb text-bold text-lg" style="letter-spacing: 1px;">常见问题</view>

      <u-collapse :head-style="{ height: '100rpx', fontSize: '32rpx', color: '#232323', letterSpacing: '1px' }">
        <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">
          {{item.body}}
        </u-collapse-item>
      </u-collapse>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        itemList: [],
      };
    },
    onLoad() {
      this.getList()
    },
    methods: {
      async getList() {
        let res = await this.$u.get('/myvcard/qa')
        let {
          qa
        } = res.data.result
        this.itemList = qa.map(item => {
          return {
            head: item.q,
            body: item.a,
            open: false
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .top {
    height: 220rpx;
    background: #1e1f25;
  }

  .card {
    width: 690rpx;
    height: 345rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 3rpx 32rpx 0rpx rgba(4, 0, 0, 0.19);
    border-radius: 20rpx;
    margin: 0 auto;
    margin-top: -160rpx;
    padding: 48rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 2rpx;

    .flex-col {
      height: 220rpx;
    }
  }
</style>
